<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
    String basePath = request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="<%=basePath %>/ExtJs5/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> 
<%-- <script type="text/javascript" src="<%=basePath %>/js/app.js"></script> --%>
<style type="text/css">
    .clear{ clear:both}
</style>
<title>ExtJsWeb</title>
</head>
<body style="background-color:#dadada;">
    <div id="extjs1" style="float: left;margin-left: 50px;"></div>
    <div id="extjs2" style="float: right;margin-right: 50px;"></div>
    <div class="clear"></div>
    <div style="display: none">
        <div id="oneTab">
            <p>这个tab所展示的内容是读取至其他HTML标签</p>
        </div>
    </div>
    <script type="text/javascript">
    Ext.onReady(function() {
    	//定义列
    	var columns=[
    		 {header: 'Frist Name',dataIndex:'colone'},
             {header:'Last Name',dataIndex:'coltwo'},
             {header:'Age',dataIndex:'colthree'}
    	];
    	//定义数据
    	var data=[
             ["Michael","Scott","28"],
             ["Dwight","Schrute","39"],
             ["Jim","Halpert","37"],
             ["Kevin","Malone","48"],
             ["Angela","Martin","26"],
             ["Steven","Jobs","43"],
    	];
    	//转换数据
    	var store = new Ext.data.ArrayStore({  
    		data:data,
    		fields:[
    		    {name:'colone'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
    		    {name:'coltwo'},
    		    {name:'colthree'}
    		]
    	});
    	//加载数据  
    	store.load();
    	
    	//定义工具按钮栏
        var field1=new Ext.form.Field();
        var tbar=Ext.create('Ext.Toolbar',{
            items:['文字',"-",{
                 xtype: "splitbutton",
                 text: "按钮",
            },{
                text:"菜单",
                menu:{
                    items:[{
                        text:"选项1",
                    },{
                        text:"选项2",
                    },{
                        text:"选项3",
                        handler:function(){
                            Ext.Msg.alert("提示","来自菜单的消息!");
                        },
                    }],
                },
            },"->","关键字:",field1,{
                 text: "搜索",
                    handler: function () {
                        store.load({ params: { keyword: field1.getValue()} });
                    }
            }],
        });
    	
        Ext.create('Ext.Panel', {
           bodyPadding:5,
           renderTo: 'extjs1',
           height: 500,
           width: 600,
           title: '测试面板',
           html: '<span style="margin-left:20px;">First Ext JS Hello World Program</span>',
           tbar:tbar,
           bodyStyle: {
        	    //background: '#3CE38A',
        	    padding:'10px'
           },
           layout: {
               type: 'vbox',       // 子元素垂直布局
               align: 'stretch',    // 每个子元素宽度充满子容器
               padding: 20,
           },
           items: [{               // 指定一个grid子元素
        	   title: '表格',
        	   xtype: 'grid',
        	   store:store,
               columns:columns,            // 只配置一列显示，没有数据
               //store: Ext.create('Ext.data.ArrayStore', {}), // 设置一个没有数据的store
               flex: 2,                                       // 占用容器的1/3高度 (在以 Box 为布局中)
               stripeRows:true, //斑马线效果
               loadMask:true, //显示遮罩和提示功能,即加载Loading……  
               forceFit:true, //自动填满表格
               bodyStyle: {
                   background: '#4693FA',
                   //padding: '10px'
               }
           }, {
               xtype: 'splitter',   //一个分割器在两个子组件之间
           }, {                    // Details 面板作为一个配置进来的Panel (没有用xtype指定，默认是 'panel').
               title: 'Details',
               layout: 'hbox',
               bodyPadding: 5,
               items: [{
                   fieldLabel: 'Data item',
                   xtype: 'textfield'
               },
               {width:10},
               {
            	   text: 'OK',
                   xtype: 'button',
                   //scale   : 'medium',
                   handler : function() {
                	   //handler 可以配置 setHandler方法进行动态的更改内部参数
                	   if (this.clickCount) {
                            this.clickCount++;
                            //alert('你已经点击这个按钮' + this.clickCount + ' 次.请进行其他操作!');
                            this.setText('ON');
                       } else {
                    	    // if the clickCount property is not set, we will set it and alert the user
                            this.clickCount = 1;
                            //alert('这个按钮只能点击一次.');
                            this.setText('OFF');
                       }
                   },
                   listeners: {
                	   click: function() {
                           // this == the button, as we are in the local scope
                           //this.setText('I was clicked!');
                           Ext.MessageBox.alert('提示', '按钮被点击!');
                       },
                   }
               }], // 表单元素(文本域)
               flex: 3,             // 占用容器的2/3高度 (在以 Box 为布局中)
               bodyStyle: {
                   //background: '#4693FA',
                   padding: '10px'
               },
           }],
        });
        var tabs1 =Ext.create('Ext.tab.Panel',{
        	renderTo: "extjs2",
        	activeTab: 0, //默认展示第几个标签页(从0开始).
        	width: 600,
            height: 500,
            //plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）
            //tbar:tbar,
            enableTabScroll: true,      
            defaults: { autoScroll: true },
            items:[
            	{id: "tab1",
                title: '普通Tab',
                html: "这只是一个非常普通的Tab。",
                items:[{xtype:'button',text:'按钮'}],
                closable: true                  //这个tab可以被关闭
                },{
                	id: "tab2",
                    title: '内容来至div',
                    contentEl: 'oneTab',             //指定了当前tab正文部分从哪个html元素读取
                    closable: true                  //这个tab可以被关闭
            	},{
            		id: "tab3",
                    title: 'Ajax Tab',
                    closable: true,                  //这个tab可以被关闭
                    autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' },
                    
            	},{
            		id: "tab4",
                    title: '事件Tab',
                    listeners: { activate: handleActivate },
                    html: "带事件的Tab。",
                    closable: true ,                 //这个tab可以被关闭
            	},{
            		id: "tab5",
                    title: '不可用Tab',
                    disabled: true,
                    closable: true,                  //这个tab可以被关闭
                    html: "不可用的Tab，你是看不到我的。"
            	}
            ],
        });
      //单击tab4后触发的事件
        function handleActivate(tab) {
            alert(tab.title + ': activated事件触发。');
        }
        
        
      
    });
    </script>
</body>
</html>